<template>
  <view class="totakenexamination">
    <u-list v-if="!testShow && list && list.length > 0">
      <u-list-item v-for="item in list" :key="item.id">
        <view class="title">
          <text>{{ item.name }}</text>
        </view>
        <view class="content">
          <view class="content-text">
            <text class="one">总分</text>
            <text class="two">100</text>
          </view>
          <view class="content-text">
            <text class="one">及格</text>
            <text class="two">{{ item.passMark }}</text>
          </view>
          <view class="content-text">
            <text class="one">考试时长</text>
            <text class="two">{{ item.examTime }}</text>
          </view>
        </view>
        <view class="tbs">
          <u-button @click="joinExam(item)" type="primary" text="参加考试"></u-button>
        </view>
      </u-list-item>
    </u-list>
    <u-empty
      v-else
      mode="list"
      text="暂无巡检任务"
      icon="http://cdn.uviewui.com/uview/empty/list.png"
    >
    </u-empty>
    <!-- 考试试卷 -->
    <view v-if="testShow" class="test-box">
      <view>开始时间：{{ startTime }} </view>
      <view>考试时间：{{ info.examTime }}分钟</view>
      <view>已用时间：{{ formatSeconds(useTime) }}</view>
      <view v-for="(item, index) in topicList" :key="item.id">
        <view
          style="
            border-top: 1px solid #898989;
            margin-top: 100rpx;
            padding-top: 80rpx;
            padding-bottom: 20rpx;
          "
        >
          {{ index + 1 }}： {{ item.name }}
        </view>
        <list
          v-if="item.type !== 4"
          v-model="item.value"
          :multiple="item.type === 2 ? true : false"
          :list="item.type === 3 ? ['正确', '错误'] : item.elect.split(',')"
        ></list>
        <u--input
          v-else
          placeholder="请输入内容"
          border="surround"
          v-model="item.value"
        ></u--input>
      </view>
      <u-button @click="submitTest" type="primary" text="提交"></u-button>
    </view>

    <u-modal
      :show="popupShow"
      :title="title"
      :content="content"
      :closeOnClickOverlay="true"
      :showCancelButton="true"
      @cancel="cancel"
      @confirm="goTo"
    ></u-modal>
  </view>
</template>

<script>
import * as api from "@/api/test.js";
import list from "./list.vue";
export default {
  components: {
    list,
  },
  computed: {
    startTime() {
      const timeFormat = uni.$u.timeFormat;

      return timeFormat(new Date(), "yyyy-mm-dd hh:MM:ss");
    },
  },
  data() {
    return {
      testShow: false,
      popupShow: false,
      isEnd: false,
      title: "",
      content: "",
      list: [],
      topicList: [],
      stime: 0,
      useTime: 0,
      info: {},
      testPaperId: null,
      timer: null,
    };
  },
  methods: {
    joinExam(item) {
      this.popupShow = true;
      this.title = "确认考试";
      this.content = "确定要开始考试？";
      this.isEnd = false;
      this.testPaperId = item.id;
      this.useTime = 0;
      api.getTestPaper(item.id).then((res) => {
        this.info = res.data;
        this.topicList = res.data.ttopics;
      });
    },
    cancel() {
      this.popupShow = false;
      this.testShow = true;
      if (this.useTime > this.info.examTime * 60) {
        this.submit();
      }
    },
    goTo() {
      if (!this.isEnd) {
        this.popupShow = false;
        this.testShow = true;
        this.timer = setInterval(() => {
          this.useTime++;
          if (this.useTime > this.info.examTime * 60) {
            this.popupShow = true;
            this.title = "考试时间到";
            this.content = "请交卷";
            this.isEnd = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      } else {
        this.submit();
      }
    },
    submit() {
      let dtos = [];
      for (let item of this.topicList) {
        if (!item.value) {
          dtos.push({
            id: item.id,
            topicResult: "",
          });
        } else if (item.value === "正确" || item.value === "错误") {
          dtos.push({
            id: item.id,
            topicResult: this.dynamicValidateForm[key] == "正确" ? 1 : 2,
          });
        } else if (item.value && item.value.length > 0) {
          dtos.push({
            id: item.id,
            topicResult: item.value.toString(),
          });
        } else {
          dtos.push({
            id: item.id,
            topicResult: item.value,
          });
        }
      }
      const timeFormat = uni.$u.timeFormat;
      let data = {
        dtos,
        submitTime: timeFormat(new Date(), "yyyy-mm-dd hh:MM:ss"),
        testpaperId: this.testPaperId,
        answerTime: this.startTime,
      };
      api.add(data).then((res) => {
        if (res.code === 200) {
          uni.$u.toast("提交成功");
          this.popupShow = false;
          this.testShow = false;
        }
      });
    },
    formatSeconds(value) {
      var theTime = parseInt(value); // 秒
      var theTime1 = 0; // 分
      var theTime2 = 0; // 小时
      if (theTime > 60) {
        theTime1 = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        // alert(theTime1+"-"+theTime);
        if (theTime1 > 60) {
          theTime2 = parseInt(theTime1 / 60);
          theTime1 = parseInt(theTime1 % 60);
        }
      }
      var result = "" + parseInt(theTime) + "秒";
      if (theTime1 > 0) {
        result = "" + parseInt(theTime1) + "分" + result;
      }
      if (theTime2 > 0) {
        result = "" + parseInt(theTime2) + "小时" + result;
      }
      return result;
    },
    submitTest() {
      this.popupShow = true;
      this.title = "确认交卷";
      this.content = "确定要交卷？";
      this.isEnd = true;
    },
  },
  onShow() {
    api.getMytestList({}).then((res) => {
      this.list = res.data;
    });
  },
};
</script>

<style lang="scss">
.totakenexamination {
  width: 100%;
  // height: 100%;
  padding: 40rpx 24rpx 65rpx;
  box-sizing: border-box;
  background-color: #f6f6f6 !important;
  .u-list {
    width: 100%;
    .u-list-item {
      width: 702rpx;
      height: 794rpx;
      border-radius: 16rpx;
      padding: 32rpx 48rpx;
      box-sizing: border-box;
      margin-bottom: 40rpx;
      background-color: #fff;
      .title {
        height: 65rpx;
        text-align: center;
        color: #333333;
        font-size: 28rpx;
      }
      .content {
        width: 100%;
        height: 552rpx;
        border-top: 1rpx solid #eeeeee;
        border-bottom: 1rpx solid #eeeeee;
        .content-text {
          height: 92rpx;
          line-height: 92rpx;
          display: flex;
          justify-content: space-between;
          .one {
            font-size: 28rpx;
            color: #999999;
          }
          .two {
            font-size: 28rpx;
            color: #666666;
          }
        }
      }
      .tbs {
        width: 100%;
        margin-top: 24rpx;
      }
    }
  }
}
</style>
